{% extends "school/layout.html" %}

{% set page_title = translate('班级管理') %}

{% block content %}
<style>
    .checkA{
        text-decoration: underline;
        color: red!important;
    }
    .selectPart{
        padding: 15px;
        text-align: center;
    }
    .tipPart{
        color: red;
        text-align: center;
        padding: 15px;
    }
    .btnPart{
        text-align: center;
    }
</style>
<div class="m-student-list">
<div class="m-fixed-table-top">
    <div class="title">
        <div class="name">{{translate('班级管理')}}</div>
        <div class="text">{{translate('班级数量')}}：{{ pagination.total }}</div>
    </div>
    <div class="toolbars">
        <div {% if in_user_verify_whitelist %} style="display: none;" {% endif %}>
            <label class="lessonType">{{translate('课程类型')}}： </label>
            <select class="sselect lessonType" id="courseTypeSelect">
                <option value="" {% if course_type == '' %} selected {% endif %} >{{translate('全部')}}</option>
                <option value="course_children" {% if course_type == 'course_children' %} selected {% endif %} >{{translate('儿童课程')}}</option>
                <option value="course_adults" {% if course_type == 'course_adults' %} selected {% endif %} >{{translate('流行经典')}}</option>
                <option value="course_xi_yang_hong" {% if course_type == 'course_xi_yang_hong' %} selected {% endif %} >{{translate('怀旧金曲')}}</option>
            </select>
        </div>
        <label>{{translate('班级类型')}}： </label>
        <select class="cselect" id="typeselect">
            <option value="all" {% if type == 'all' %} selected {% endif %} >{{translate('全部')}}</option>
            <option value="normal_class" {% if type == 'normal_class' %} selected {% endif %} >{{translate('正式班')}}</option>
            <option value="exp_class" {% if type == 'exp_class' %} selected {% endif %} >{{translate('体验班')}}</option>
        </select>
        <label>{{translate('状态')}}： </label>
        <select class="cselect" id="classselect">
            <option value="all" {% if stat == 'all' %} selected {% endif %} >{{translate('全部')}}</option>
            <option value="onboard" {% if stat == 'onboard' %} selected {% endif %} >{{translate('正常开课')}}</option>
            <option value="deleted" {% if stat == 'deleted' %} selected {% endif %} >{{translate('删除')}}</option>
        </select>
        <a href="{{ url_for('school.create_class') }}" class="new">{{translate('新建')}}</a>
        <button class="del disabled">{{translate('删除')}}</button>
        <a class="export" id="export">{{translate('导出Excel列表')}}</a>
    </div>
</div>
<table class="table table-condensed table-striped table-bordered">
    <thead>
        <tr class="header">
            <th class="cell cell-checkbox"><input type="checkbox" {% if stat == "deleted" %}disabled{% endif %}></th>
            <th>{{translate('班级名称')}}</th>
            <th>{{translate('班级类型')}}</th>
            {% if not in_user_verify_whitelist %}
            <th>{{translate('课程类型')}}</th>
            {% endif %}
            <th>{{translate('班级人数')}}</th>
            <th>{{translate('班级开课时间')}}</th>
            <th>{{translate('任课老师')}}</th>
            <th>{{translate('状态')}}</th>
            <th>{{translate('教室')}}</th>
            <th>{{translate('学习进度')}}</th>
            <th>{{translate('管理')}}</th>
        </tr>
    </thead>
    <tbody>
        {% for c in classes %}
        <tr class="row-li" id="{{ c.id }}">
            <td class="cell cell-checkbox"><input type="checkbox" {% if c.active == False %}disabled{% endif %}></td>
            {% if c.active == True %}
                <td><a href="/school/class_students/{{ c.id }}?stat=onboard">{{ c.name }}</a></td>
            {% else %}
                <td>{{ c.name }}</td>
            {% endif %}
            {% if c.is_exp_class is none %}
            <td><a href="" class="checkA">{{translate('请选择')}}</a></td>
            {% elif c.is_exp_class == true %}<td>{{translate('体验班')}}</td>{% else %}<td>{{translate('正式班')}}</td>{% endif %}
            {% if not in_user_verify_whitelist %}
            <td>{{ c.course_type }}</td>
            {% endif %}
            <td>{{ c.student_num }}</td>
            <td>{{ c.created_at.strftime('%Y-%m-%d') }}</td>
            <td><a href="/school/teachers/edit/{{c.teacher.id}}">{{ c.teacher.name }}</a></td>
            {% if c.active == True %}
                <td>{{translate('正常上课')}}</td>
            {% else %}
                <td><font color="red">{{translate('删除')}}</font></td>
            {% endif %}
            <td>{{ c.classroom.name }}</td>
            <td>{{ c.lesson }}</td>
            <td>
                {% if current_user.is_admin %}
                {% if c.active == True %}
                    <a style="display:inline;" href="{{ url_for('school.edit_class', cid=c.id) }}"><span class="glyphicon glyphicon-edit"></span></a>
                    <a style="display:inline;" href="javascript:deleteClass({{ c.id }})"><span class="glyphicon glyphicon-trash"></span></a>
                {% else %}
                    <a href="" class="restoremusicclass"><font color="blue">{{translate('还原')}}</font></a>
                {% endif %}
                {% else %}
                <a href="{{ url_for('school.view_class', cid=c.id) }}" class="show">{{translate('查看')}}</a>
                {% endif %}
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% include "school/pagination.html" %}
</div>
<div class="modal" id="deleteModal">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-body">
                <p>{{translate('删除班级会导致该班学生变为未分配班级状态，确认删除？')}}</p>
                <button class="btn btn-danger">{{translate('确认')}}</button>
                <button class="btn btn-default">{{translate('取消')}}</button>
            </div>
        </div>
    </div>
</div>
<div class="modal" id="selectModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">{{translate('选择班级类型')}}</h4>
            </div>
            <div class="modal-body">
                <div class="selectPart">
                    <input type="radio" name="classType" value="normal_class"> {{translate('正式班')}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="radio" name="classType" value="exp_class"> {{translate('体验班')}}
                </div>
                <div class="tipPart">
                    {{translate('*班级类型一旦选定不可更改')}}
                </div>
                <div class="alertPart">
                    
                </div>
                <div class="btnPart">
                    <button class="btn btn-default" id="done" style="width: 80px;margin-right: 30px;">{{translate('确认')}}</button>
                    <button class="btn btn-default" style="width: 80px" data-dismiss="modal">{{translate('取消')}}</button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block js %}
<script type="text/javascript">
var url_mapping = {
    {% for stat in ["all", "onboard", "deleted"] %}
    {% for type in ["all", "normal_class", "exp_class"] %}
    {% for course_type in ["", "course_children", "course_adults", "course_xi_yang_hong"] %}
    "{{stat}},{{type}},{{course_type}}" : "{{ url_for ('school.list_classes', stat=stat, type=type, course_type=course_type) | safe}}",
    {% endfor %}
    {% endfor %}
    {% endfor %}
}

$(function(){

    var cid = '';

    function clearForm(){
        $('input[name="classType"]').removeAttr('checked');
        cid = '';
    }

     function change_url_by_stat() {
        var stat = document.getElementById("classselect").value;
        var type = document.getElementById("typeselect").value;
        var courseType = document.getElementById("courseTypeSelect").value;
        var title = stat+','+type+','+courseType;

        for(var i in url_mapping){
            if(title === i){
                window.location.href = url_mapping[i];
                break;
            }
        }
    }
    $('#export').click(function(){
        window.open('/school/class/export_excel'+(localStorage.lang=='lang=en'? '?'+ localStorage.lang:''));
    })
    $('#classselect').bind('change', function() {
        change_url_by_stat();
    });

    $('#typeselect').bind('change', function() {
        change_url_by_stat();
    });

    $('#courseTypeSelect').bind('change', function() {
        change_url_by_stat();
    });

    $('.restoremusicclass').bind('click', function() {
        $.ajaxSetup({   
            async : false  
        });
        id = $(this).parent().parent().attr('id');
        url = "/school/class/restore/" + id
        if(localStorage.lang == 'lang=en'){
            url += '?'+localStorage.lang
        }
        $.post(url, function(data) {
            if (data['code'] != 0) {
                alert['msg']
            }
            change_url_by_stat();
        });
    });

    // click trash
    $('span.glyphicon-trash').bind('click',function(){
        var cid = $(this).parent().parent().parent().attr('id');
        $('#deleteModal').modal('show');

        // click delete confirm
        $('.modal-body button.btn-danger').bind('click', function(){
            var url = '/school/classes/delete/' + cid;
            $.post(url, function(data){
                if (data['code']!=0){
                    alert(data['msg']);
                }
                change_url_by_stat();
            }, 'json');
        });
    });


    // click delete all
    $('.del').click(function(){
        var ids = [];
        $('.row-li :checked').each(function(){
            ids.push($(this).parent().parent().attr('id'));
        });
        if (!ids.length) {
            alert('{{translate("请点击复选框选中要删除的学生")}}');
            return;
        }
        $('#deleteModal').modal('show');

        var data = {
            'ids': ids
        };

        // click modal alert confirm button
        $('#deleteModal button.btn-danger').bind('click',function(){
            var url = '{{ url_for('school.delete_muti_classes') }}';
            $.post(url, data=data, function(data){
                if (data['code']!=0){
                    alert(data['msg']);
                }
                change_url_by_stat();
            }, 'json');
        });

    });

    // click show when teacher is not admin
    $('#deleteModal button').bind('click',function(){
        $('.modal').modal('hide');
    });
    //请选择
    $('.checkA').click(function(e){
        e.preventDefault();
        clearForm();
        cid = $(this).parent().parent()[0].id;
        $('#selectModal').modal('show');
    });
    $('#done').click(function(){
        var checked = $('input[name="classType"]:checked');
        if(checked.length == 0){
            kalert('{{translate("请选择班级类型！")}}');
        }else{
            var val = checked[0].value;
            $.post('/school/class/change_type',{
                'cid': cid,
                'type': val
            },function(data){
                var d = JSON.parse(data);
                if(d.code == 0){
                    kalert('{{translate("修改成功！")}}');
                    $('#selectModal').modal('hide');
                    setTimeout(function(){
                        window.location.reload();
                    },2000)
                }else{
                    kalert('{{translate("班级里存在未验证的学生，请先验证")}}');
                }
            });
        }
    });
});
</script>
{% endblock %}
